<template>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <div class="block">
      <el-carousel height="300px" >
        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
          <a :href="item.content" target="_blank">
            <img :src="$addBaseURL(item.name)" class="d-block w-100" alt="..." style="height: 300px;" >
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import {imagesListGetApi} from "../../api/modules/images";

  export default {
    name: "Banner",
    data () {
      return {
        bannerList: []
      }
    },
    mounted() {
      this.getBanner()
    },
    methods: {
      getBanner(){
        imagesListGetApi({type:0}).then(result => {
          if(result.status == 200){
            this.bannerList = result.resultParam.pictureList
          }
        })
      },
      linkTo (index) {
        console.log(this.bannerList[index].content)
        this.$router.push(this.bannerList[index].content)
      }
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #a00000;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #a00000;
  }
</style>
